<template>
  <el-card>
    <el-table
      :data="permissionList"
      border
      row-key="id"
      :expand-row-keys="expandRowKeys"
    >
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="权限值" prop="code"></el-table-column>
      <el-table-column label="组件路径" prop="toCode"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            :icon="Plus"
            size="small"
            @click="showSavePermission(row)"
            v-if="row.level !== 4"
            v-permission="'btn.Permission.add'"
          />
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            v-if="row.level !== 1"
            @click="showUpdatePermission(row)"
            v-permission="'btn.Permission.update'"
          />
          <el-button
            type="danger"
            :icon="Delete"
            size="small"
            v-if="row.level !== 1"
            @click="removePermission(row.id)"
            v-permission="'btn.Permission.remove'"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="visible"
      :title="`${permissionFormData.id ? '修改' : '添加'} 菜单`"
    >
      <el-form>
        <el-form-item label="菜单名称">
          <el-input v-model="permissionFormData.name"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="permissionFormData.code"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="saveOrUpdatePermission"
            >确认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "XPermission",
};
</script>

<script lang="ts" setup>
import { Plus, Edit, Delete } from "@element-plus/icons-vue";
import { ref, onMounted, reactive } from "vue";
import {
  getPermissionListApi,
  savePermissionApi,
  updatePermissionApi,
  removePermissionApi,
} from "@/api/acl/permission";
import type {
  PermissionList,
  PermissionItem,
} from "@/api/acl/model/permissionModel";
import { ElMessage } from "element-plus";

const permissionList = ref<PermissionList>([]);
const expandRowKeys = ref<string[]>([]);

// 定义显示框
const visible = ref(false);

// 定义表单数据的绑定
const permissionFormData = reactive({
  id: "",
  pid: "",
  code: "",
  name: "",
  level: 1,
});

// 点击加
const showSavePermission = (row: PermissionItem) => {
  visible.value = true;
  permissionFormData.pid = row.id;
  permissionFormData.id = "";
  permissionFormData.code = "";
  permissionFormData.name = "";
  permissionFormData.level = row.level + 1;
};

// 点击修改
const showUpdatePermission = (row: PermissionItem) => {
  visible.value = true;

  permissionFormData.id = row.id;
  permissionFormData.pid = "";
  permissionFormData.code = row.code;
  permissionFormData.name = row.name;
  permissionFormData.level = row.level;
};

// 点击确认判断是否有id,有就修改，没就添加

const saveOrUpdatePermission = async () => {
  const { id, pid, code, name, level } = permissionFormData;

  if (id) {
    await updatePermissionApi({ id, code, name, level });
    ElMessage.success("修改成功！");
  } else {
    await savePermissionApi({ pid, code, name, level });
    ElMessage.success("添加成功！");
  }

  await getPermissionList();
  visible.value = false;
};

// 点击删除
const removePermission = async (id: string) => {
  await removePermissionApi(id);
  ElMessage.success("删除成功！");
  getPermissionList();
};

// 请求
onMounted(async () => {
  const result = await getPermissionList();
  // 默认要展开的元素
  expandRowKeys.value.push(result[0].id);
});

const getPermissionList = async () => {
  const result = await getPermissionListApi();
  permissionList.value = result.children;
  return result.children;
};
</script>

<style scoped></style>